<template>
  <view class="container">
    <uni-nav-bar left-icon="back" title="账单" />
    <view class="header">
      <view class="month-selector">
        <text>{{ currentMonth }}</text>
        <u-datetime-picker 
          mode="year-month" 
          v-model="selectedDate" 
          @change="onDateChange"
          :hasInput="false"
        />
      </view>
      <view class="withdrawal">
        <text>提现 ¥{{ withdrawalAmount }}</text>
      </view>
    </view>
    <scroll-view scroll-y class="transaction-list">
      <view v-for="item in transactions" :key="item.id" class="transaction-item">
        <view class="left">
          <text class="type">{{ item.type }}</text>
          <text class="time">{{ item.created }}</text>
        </view>
        <view class="right">
          <text class="amount">{{ item.money }}</text>
        </view>
      </view>
      <view v-if="transactions.length === 0" class="empty">暂无数据</view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    const now = new Date();
    return {
      selectedDate: `${now.getFullYear()}-${now.getMonth() + 1}`,
      currentMonth: `${now.getFullYear()}年${now.getMonth() + 1}月`,
      withdrawalAmount: 0,
      transactions: []
    };
  },
  onLoad() {
    this.loadData();
  },
  methods: {
    onDateChange(e) {
      const [year, month] = e.split('-');
      this.currentMonth = `${year}年${parseInt(month)}月`;
      this.loadData(year, parseInt(month));
    },
    async loadData(year = new Date().getFullYear(), month = new Date().getMonth() + 1) {
      // TODO: 调用API获取数据
      const res = await uni.request({
        url: 'https://api.example.com/userBill',
        data: { y: year, m: month }
      });
      if (res.data.r === 0) {
        this.withdrawalAmount = res.data.data.Withdrawals;
        this.transactions = res.data.data.list;
      }
    }
  }
}
</script>

<style>
.container { height: 100vh; }
.header { padding: 10px; background: #fff; border-bottom: 1px solid #eee; }
.month-selector { display: flex; align-items: center; }
.withdrawal { margin-top: 5px; color: #ff5500; }
.transaction-list { height: calc(100vh - 100px); }
.transaction-item { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid #eee; }
.left .type { font-size: 16px; }
.left .time { font-size: 12px; color: #999; }
.right .amount { font-size: 16px; color: #ff5500; }
.empty { text-align: center; padding: 20px; color: #999; }
</style>